<template>
  <div :class="['item', { 'full': full }]">
    <img @click="toGameDetail(item.game_id, item.down_link, item.classify)" class="item__icon" :src="item.icon">
    <div class="item__inner">
      <div @click="toGameDetail(item.game_id, item.down_link, item.classify)" class="item__info">
        <div :class="['item__head', { 'server': type === 'server' }]" v-if="type === 'server'">
            <strong class="item__title">{{item.game_name}}</strong>
        </div>
        <div :class="['item__head', { 'server': type === 'server' }]">
          <strong class="item__title">{{item.server_name || item.game_name}}</strong>
        </div>
        <div class="item__body" v-if="type === 'tag'">
          <p class="item__desc">{{item.type.join(' | ')}}</p>
        </div>
        <div class="item__body" v-else-if="type === 'server'">
          <p class="item__desc">{{item.ser_name}}</p>
          <p class="item__desc">{{dateFormat(item.start_time, 'MM-dd hh:mm')}}</p>
        </div>
        <div class="item__body" v-else>
          <p class="item__type" v-if="item.type">
            {{item.classify !== 5 ? (item.size + ' · ') : ''}}<span class="text_secondary">{{item.type[0]}}</span>
          </p>
          <p class="item__desc">{{item.one_word || item.oneword}}</p>
        </div>
      </div>
      <button class="item__btn" @click="playGame(item.down_url,item.classify === 5,item)" data-clipboard-action="copy" :data-clipboard-text="playIndex.app_down.huoagentcode" v-if="type === 'tag'">{{item.classify === 5 ? '开始' : '下载'}}</button>
      <button class="item__btn default" @click="playGame(item.down_link,item.classify === 5,item)" data-clipboard-action="copy" :data-clipboard-text="playIndex.app_down.huoagentcode" v-else-if="type === 'server'">{{item.classify === 5 ? '开始' : '下载'}}</button>
      <button class="item__btn" @click="playGame(item.down_url,item.classify === 5,item)" data-clipboard-action="copy" :data-clipboard-text="playIndex.app_down.huoagentcode" v-else>{{item.classify === 5 ? '开始' : '下载'}}</button>
    </div>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import Clipboard from 'clipboard'

export default {
  name: 'columnItem',
  props: {
    item: {
      type: Object
    },
    full: Boolean,
    type: String
  },
  computed: {
    ...mapGetters([
      'playIndex'
    ])
  },
  created () {
    let clipboard = new Clipboard('.item__btn')
    clipboard.on('success', e => {
    })
    clipboard.on('error', e => {
    })
  }
}
</script>

<style scoped lang="scss">
.item {
  align-items: center;
  display: flex;

  &__icon {
    border-radius: 0.1rem;
    height: 0.62rem;
    margin: 0 0.1rem 0 0.15rem;
    width: 0.62rem;
  }

  &__inner {
    align-items: center;
    border-bottom: 1px solid #e8e8e8; /* no */
    display: flex;
    flex: 1;
    height: 0.92rem;
    overflow: hidden;
    padding: 0.15rem 0;
  }

  &__info {
    flex: 1;
    overflow: hidden;
  }

  &__head {
    align-items: center;
    display: flex;
    margin-bottom: 0.05rem;

    &.server {
      margin-bottom: 0;
    }
  }

  &__title {
    color: #333;
    font-size: 0.14rem;
    font-weight: bold;
  }

  &__type {
    margin: -0.03rem 0 0.03rem;
  }

  &__desc {
    color: #999;
    font-size: 0.12rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  &__btn {
    background-color: #FF8C2D;
    border-radius: 0.13rem;
    color: #fff;
    font-size: 0.12rem;
    font-weight: bold;
    height: 0.26rem;
    line-height: 0.26rem;
    margin-right: 0.15rem;
    padding: 0 0.14rem;

    &.default {
      background-color: #fff;
      border: 1px solid #FF8400; /* no */
      color: #FF8C2D;
    }
  }
}

.full {
  border-bottom: 1px solid #e8e8e8; /* no */
  margin: 0 0.15rem;

  .item {
    &__icon {
      height: 0.58rem;
      margin-left: 0;
      width: 0.58rem;
    }

    &__inner {
      border-bottom: 0 none;
      height: 0.88rem;
    }

    &__btn {
      margin-right: 0;
    }
  }
}
</style>
